<template>
    <view class="bottom">
        <Header></Header>
        <view>
            <view class="back">
                <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                        name="arrow-left" color="#00eaff" @click="back"></u-icon>
                <text style="color: #00eaff;padding-right: 30rpx">My Backpack</text>
            </view>
            <uni-notice-bar scrollable single :text="tips" showIcon :speed="50" show-get-more
                            background-color="#0f0e2d">
            </uni-notice-bar>
            <view>
                <u-tabs :list="list" @change="change" :current="current" :is-scroll="false"
                        bg-color="#0f0e2d" inactive-color="#4e5278" active-color="#00eaff"
                        :active-item-style="{color: '#00eaff', fontSize: '28rpx'}">
                </u-tabs>
            </view>
            <view v-if="current===0" class="statistics">
                <u-row gutter="16">
                    <u-col span="4">
                        <checkbox-group @change="allChecked">
                            <label>
                                <checkbox :checked="checked"/>
                                Select All
                            </label>
                        </checkbox-group>
                    </u-col>
                    <u-col span="3">
                        <text>number：{{ selectList.length }}</text>
                    </u-col>
                    <u-col span="5">
                        <text style="padding-left: 10rpx">Total ：{{ totalPrice.toFixed(2) }}</text>
                        <i class="custom-icon custom-icon-objects-color_diamond"
                           style="padding-left: 10rpx;color: #65a5c7"></i>
                    </u-col>
                </u-row>
                <u-row gutter="16" style="padding-top: 20rpx">
                    <u-col span="5">
                        <u-button type="warning" size="medium" @click="toRecycle">
                            recovery
                            <!--                            <u-icon name="photo"></u-icon>-->
                        </u-button>
                    </u-col>
                    <u-col span="2"></u-col>
                    <u-col span="5">
                        <u-button type="primary" size="medium" @click="withdraw">extract</u-button>
                    </u-col>
                </u-row>
            </view>
            <view>
                <u-row gutter="20">
                    <u-col span="4" v-for="(item,index) in myBox" :key="index"
                           :class="[item.selected?'selected':'unselected']">
                        <view class="my-box" :style="getBackgroundStyle(item.tag)"  @click="choice(index)">
                            <view class="my-box-checkbox" v-if="current===0&&total!==0">
                                <u-checkbox-group active-color="#1a9b09">
                                    <u-checkbox v-model="item.selected" shape="circle">
                                    </u-checkbox>
                                </u-checkbox-group>
                            </view>
                            <view class="my-box-img">
                                <u-image :src="item.goods_image" width="180rpx" height="135rpx"></u-image>
                            </view>
                            <view class="my-box-name">{{ item.goods_name }}</view>
                            <view class="my-box-price">
                                <u-icon name="rmb-circle-fill" color="#2979ff" size="28"
                                        style="padding-right: 5rpx"></u-icon>
                                {{ item.goods_coin_price }}
                            </view>
                        </view>
                    </u-col>
                </u-row>
            </view>
            <view v-if="total!==0">
                <!--                <pagination :total="total" :currentPage.sync="current_page"  page-size="9"/>-->
                <uni-pagination :show-icon="true" :total="total" :current="current_page" :pagerCount="5"
                                @change="changePage" style="margin: 0 auto;width: 350px"/>
            </view>
            <view v-else>
                <u-divider style="padding: 30rpx" bg-color="#0f0e2d">There's no more data left</u-divider>
            </view>
            <!--            <uni-pagination :total="total" :current="current_page" @change="changePage"/>-->
        </view>
        <u-toast ref="uToast"/>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";

export default {
    name: "myBox",
    components: {
        CustomTabbar,
        Header
    },
    data() {
        return {
            windowsWidth: '',
            list: [{
                name: 'My backpack'

            }, {
                name: 'Displaced'
            }],
            current: 0,
            // 背包
            myBox: [],
            total: 0,
            current_page: 1,
            pagesize: 9,
            last_page: 0,
            tips: '',
            // 选中的值
            selectList: [],
            selectId: [],
            // 总价值
            totalPrice: 0,
            // 全选
            checked: false
        };
    },
    mounted() {
        this.windowsWidth = this.$store.getters.getWindowsWidth;
        document.documentElement.style.setProperty('--windows-width', this.windowsWidth + 'px');
    },
    onShow() {
        this.getMyBox();
    },
    methods: {
        // 返回
        back() {
            this.$u.route({
                type: 'navigateBack',
                delta: 1
            })
        },
        // 切换
        change(index) {
            this.current = index;
            this.getMyBox()
        },
        // 修改当前页
        changePage(e) {
            this.current_page = e.current;
            this.getMyBox();
            this.checked = false
            this.totalPrice = 0;
            this.selectId = [];
            this.selectList = [];
            for (let i = 0; i < this.myBox.length; i++) {
                this.myBox[i].selected = false;
            }
        },
        // 获取背包
        getMyBox() {
            this.current_page = 1
            this.$u.api.mybox({
                page: this.current_page,
                pagesize: this.pagesize,
                status: this.current + 1
            }).then(res => {
                if (res.code === 1) {
                    this.tips = res.data.tips;
                    // 没数据
                    if (res.data.list.data.length === 0) {
                        this.noMore = true;
                        this.myBox = [];
                        return
                    }
                    for (let i = 0; i < res.data.list.data.length; i++) {
                        res.data.list.data[i].selected = false;
                    }
                    this.myBox = res.data.list.data;
                    this.total = res.data.list.total;
                    this.current_page = res.data.list.current_page;
                    this.last_page = res.data.list.last_page;
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        // 全选
        allChecked() {
            if (this.checked) {
                this.checked = false
                this.totalPrice = 0;
                this.selectId = [];
                this.selectList = [];
                for (let i = 0; i < this.myBox.length; i++) {
                    this.myBox[i].selected = false;
                }
            } else {
                this.checked = true;
                this.totalPrice = 0;
                this.selectId = [];
                this.selectList = [];
                for (let i = 0; i < this.myBox.length; i++) {
                    this.myBox[i].selected = true;
                    this.totalPrice += parseFloat(this.myBox[i].goods_coin_price)
                    this.selectId.push(this.myBox[i].record_id)
                    this.selectList = this.selectId
                }
            }
        },
        // 计算背景图
        getBackgroundStyle(tag) {
            // 根据tag的值返回不同的背景图样式
            switch (tag) {
                case 'legend':
                    return "background: linear-gradient(167deg,#4C5070 32.38%,#AC772B 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%);";
                case 'chuanqi':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#902133 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                case 'supreme':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#5E1D73 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%);';
                case 'rare':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#2C1D7E 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                case 'normal':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#7E849C 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                default:
                    return '';
            }
        },
        //选择按钮
        choice(index) {
            if (this.current === 1) {
                return
            }
            //当再次被选中时，取消当前选中项
            if (this.myBox[index].selected === true) {
                this.myBox[index].selected = false;
                this.totalPrice -= parseFloat(this.myBox[index].goods_coin_price);
                //取消选中时删除数组中的值
                for (let i = 0; i < this.selectId.length; i++) {
                    if (this.selectId[i] === this.myBox[index].record_id) {
                        this.selectId.splice(i, 1);
                    }
                }
                this.selectList = this.selectId
                if (!(this.myBox.every(item => this.selectList.includes(item.record_id)))) {
                    this.checked = false;
                }
            } else {
                this.myBox[index].selected = true;
                this.selectId.push(this.myBox[index].record_id)
                this.totalPrice += parseFloat(this.myBox[index].goods_coin_price);
                this.selectList = this.selectId
                if (this.myBox.every(item => this.selectList.includes(item.record_id))) {
                    this.checked = true;
                }
            }
        },
        // 提货
        withdraw() {
            let record_ids = ''
            record_ids = this.selectList.join(',')
            this.$u.api.applyDelivery({
                record_ids: record_ids
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success'
                    });
                    this.$u.api.getUserInfo().then(response => {
                        if (response.code === 1) {
                            const user = response.data;
                            // 提交mutation来更新Vuex中的状态
                            this.$store.commit('user/SET_USER', user);
                            // 保存到本地存储
                            uni.setStorageSync('user', user);
                        }
                    })
                    this.getMyBox();
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    });
                }
            })
        },
        // 回收
        toRecycle() {
            let record_ids = ''
            record_ids = this.selectList.join(',')
            this.$u.api.exchange({
                record_ids: record_ids
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success',
                    });
                    this.$u.api.getUserInfo().then(response => {
                        if (response.code === 1) {
                            const user = response.data;
                            // 提交mutation来更新Vuex中的状态
                            this.$store.commit('user/SET_USER', user);
                            // 保存到本地存储
                            uni.setStorageSync('user', user);
                            // 刷新数据
                            this.current_page = 1
                            this.checked = false
                            this.totalPrice = 0;
                            this.selectId = [];
                            this.selectList = [];
                            this.getMyBox();
                        }
                    })
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    });
                }

            })
        }
    }
    ,

}
</script>

<style lang="scss" scoped>
.back {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}

.statistics {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    height: 150rpx;
    margin-bottom: 20rpx;

    ::v-deep .u-size-medium {
        display: flex;
    }

}

.my-box {
    padding: 20rpx 20rpx 0 20rpx;
    //height: 370rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: 100% 100%;
    border-radius: 20rpx;
    margin-bottom: 20rpx;

    position: relative;

    .my-box-checkbox {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        z-index: 100;

        ::v-deep .uni-checkbox-input {
            border-radius: 50%;
        }
    }

    .my-box-img {
        padding-top: 20rpx;
        margin: 0 auto;
    }

    .my-box-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 10rpx;
    }

    .my-box-price {
        margin-top: 10rpx;
        margin-bottom: 20rpx;
    }


}

// 选中
.selected {
    //border: 1px solid #0086b3;
    //background-color: #4cd964;
}

.unselected {
    //border: 1px solid #959595;
}

::v-deep .uni-pagination {
    display: flex;
    justify-content: space-between;

    .is-pc-hide {
        display: block;
    }

    .is-phone-hide {
        display: none;
    }

    .uni-pagination__num-flex-none {
        flex: none;
    }
}

::v-deep .u-type-success {
    background-color: #0f0e2d;
    border: none;
}

::v-deep .u-type-error {
    background-color: #0f0e2d;
    border: none;
}

</style>
